import { Card, message } from 'antd';
import React, { useRef, useEffect, useState } from 'react'
import * as echarts from 'echarts'
import { getReport } from '../../app/report'

export default function () {
    const pictureRef = useRef()
    const [option, setOption] = useState({
        title: {
        text: '用户来源'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        }
    })
    useEffect(() => {
        const myChart = echarts.init(pictureRef.current)
        myChart.setOption(option, [])
    },[option])
    useEffect(async () => {
        const { data, meta } = await getReport()
        if(meta.status !== 200) message.error('获取数据报表失败')
        setOption(preState => ({...preState, ...data}))
    }, [])
    return (
        <Card>
            <div ref={pictureRef} style={{ width: '600px', height:'400px' }}></div>
        </Card>
    )
}